<template>
  <li :class="{'active': isActive}" @click="menuClicked">
    <a href="javaScript:void();">
      <img
        :src="iconPath"
        class="img-fluid"
      /><span>{{name}}</span
      ><i class="feather icon-chevron-right pull-right"></i>
      <span class="badge badge-danger pull-right">{{badgeTitle}}</span>
    </a>
    <slot></slot>
  </li>
</template>

<script>
export default {
  props:{
      iconName: {type: String, required: true},
      name: {type: String, required: true},
      badgeTitle: {type: String}
  },
  data() {
    return {
      isActive: true
    };
  },
  computed:{
      iconPath:function(){
        return `@/assets/images/svg-icon/${this.iconName}.svg`;
      }
  },
  methods:{
   menuClicked: function(){
     this.$emit("all-un-active");
   }
  }
};
</script>

<style>
</style>